<template>
  <div class="factory-list tag-scrollbar">
    <el-collapse v-model="type" accordion @change="handleChange">
      <template v-for="item in list">
        <el-collapse-item
          :key="item.listTypeId"
          :name="item.listTypeId"
          v-if="showDevired ? true : item.listTypeId != 7"
        >
          <template slot="title">
            <icon-svg :name="item.listTypeId | typeIcon"></icon-svg>
            <template v-if="item.listTypeId === 1">
              <span class="catalogclass-title">{{ selectClassItem.catalogClassNm }} </span>
              （{{ selectClassItem.classTagNum }}）
            </template>
            <template v-else>
              {{ item.listType }} （{{ item.listTagNum }}）
            </template>
          </template>
          <div class="tag-wrap" v-loading="loading">
            <factory-catalog
              v-if="item.listTypeId === 1"
              :preview="preview"
              ref="factoryCatalog"
              @changeClass="changeClass"
              @toggleLoading="toggleLoading"
              @drag="drag"
              @addItem="addItem"
              @clearConfig="$emit('clearConfig')"
            ></factory-catalog>
            <factory-devired
              v-else-if="item.listTypeId === 7"
              :ref="'factoryList' + item.listTypeId"
              :preview="preview"
              @toggleLoading="toggleLoading"
              @drag="drag"
              @addItem="addItem"
            ></factory-devired>
            <factory-list
              :listType="item.listTypeId"
              :key="item.listTypeId"
              :ref="'factoryList' + item.listTypeId"
              :preview="preview"
              @toggleLoading="toggleLoading"
              @drag="drag"
              @addItem="addItem"
              v-else
            ></factory-list>
          </div>
        </el-collapse-item>
      </template>
    </el-collapse>
  </div>
</template>

<script>
import factoryCatalog from './factory-catalog-list'
import factoryDevired from './factory-devired-list'
import factoryList from './factory-list'
export default {
  props: {
    preview: {
      type: Boolean,
      default: false
    },
    showDevired: {
      type: Boolean,
      default: true
    }
  },
  components: {
    factoryCatalog,
    factoryDevired,
    factoryList
  },
  data() {
    return {
      loading: false,
      keyword: '',
      type: 1,
      list: [],
      selectClassItem: {},
      catalogClassTimer: null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleChange(val) {
      if (val && val !== 1 && this.$refs['factoryList' + val][0].getList) this.$refs['factoryList' + val][0].getList()
    },
    changeClass(catalogClass) {
      if (catalogClass) this.selectClassItem = catalogClass
    },
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('tagFactory/factoryListType'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.list = []
          for (let i in data.data) {
            let item = Object.assign({}, data.data[i], { keyword: '', children: [] })
            this.list.push(item)
          }
          this.type = data.data[0].listTypeId
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toggleLoading(loading) {
      this.loading = loading
    },
    drag(event, item) {
      if (!item.assetId) return
      event.dataTransfer.setData('tagId', item.assetId)
      event.dataTransfer.setData('tagNm', item.assetNm)
      event.dataTransfer.setData('valueType', item.valueType)
      event.dataTransfer.setData('tagCode', item.assetCode)
      if (item.valueType === 3) event.dataTransfer.setData('operationType', '=')
      event.dataTransfer.setData('valueTypeCode', item.valueTypeCode)
      event.dataTransfer.setData('enums', JSON.stringify(item.enums))
      event.dataTransfer.setData('labTbl', item.labTbl) // 表名
      event.dataTransfer.setData('labFldMap', item.labFldMap) // 字段名
      event.dataTransfer.setData('dictTag', item.dictTag) // 取值类型中文
      event.dataTransfer.setData('dictDatabaseType', item.dbVal) // 数据库类型
      event.dataTransfer.setData('isDerLabel', item.isDerLabel)
    },
    addItem(item) {
      this.$emit('addItem', item)
    },
    getCatalogClass() {
      return this.selectClassItem.catalogClassId
    },
    changeCatalogClass(catalogClassId) {
      if (this.selectClassItem.catalogClassId !== catalogClassId) {
        if (this.$refs.factoryCatalog && this.$refs.factoryCatalog.length) {
          this.$refs.factoryCatalog[0].selectCatalogClass = catalogClassId
          this.catalogClassTimer = null
        } else {
          this.catalogClassTimer = setTimeout(() => {
            this.changeCatalogClass(catalogClassId)
          }, 100)
        }
      }
    }
  },
  filters: {
    typeIcon(val) {
      let icon = ''
      switch (val) {
        case 1:
          // 全部
          icon = 'iconFactoryAll'
          break
        case 3:
          // 我的关注
          icon = 'iconFactoryWatch'
          break
        case 4:
          // 我的专辑
          icon = 'iconFactoryAlbum'
          break
        case 5:
          // 猜你喜欢
          icon = 'iconFactoryFav'
          break
        case 6:
          // 热门
          icon = 'iconFactoryHot'
          break
        case 7:
          // 计算型标签
          icon = 'iconCalculateTag'
          break
      }
      return icon
    }
  }
}
</script>

<style lang="scss">
@import './factory.scss';
</style>
